<template>
<div>
    {{ isVisible }}
</div>
</template>

<script>
    import { Loading } from 'element-ui';

    export default {
        created() {
            this.$watch('isVisible', (newVal, _) => {
                if (newVal) {
                    Loading.service({
                        fullscreen: true,
                        lock: true,
                        text: '',
                    });
                } else {
                    Loading.service().close();
                }
            });
        },
        computed: {
            isVisible() {
                return this.$store.state.loading.isVisible
            }
        },
    }
</script>